<template>
  <transition name="slide">
    <div class="details">
        <div class="heade">
             <i class="icon-font icon-back" @click="back">&#xe697;</i> 
            <div class="switches-wrapper t3">
                <switches class="three" @switch="switchItem" :switches="switches" :currentIndex="currentIndex"></switches>
            </div>
            <i class="icon-font icon-all">&#xe696;</i> 
            <i class="icon-font icon-evaluate">&#xe62f;</i> 
        </div>
        <scroll ref="goods" class="recommend-content" v-if="currentIndex===0">
            <div>
                <div v-if="picList.length" class="slider-wrapper">
                  <div class="slider-content">
                    <slider ref="slider">
                      <div v-for="(item,index) in picList" :key="index">
                          <img @load="loadImage" :src="item">
                      </div>
                    </slider>
                  </div>
                </div>
                <div class="txt">
                    <div class="title"  v-html="title"></div>
                    <div class="description">
                        <div class="words"  v-html="smalltitle">
                        </div>
                        <div class="price">
                            <i>￥</i><span v-html="price"></span>
                        </div>
                    </div>
                </div>
                <div class="division"></div>
                <div class="favour quan"  @click="showConfirmA">
                    <span>领券</span>
                     <i class="icon-font icon-more">&#xe6a7;</i> 
                </div>
                <div class="favour ser"  @click="showConfirmB">
                    <span>服务</span>
                    <i class="icon-font icon-more">&#xe6a7;</i> 
                </div>
                <div class="division"></div>
                <div class="evaluate">
                    评价（<span v-html="number"></span>）
                    <div class="checkAll"><span>查看全部</span><i></i></div>
                </div>
                <!--买家评价-->
                <div class="buyers">
                    <div class="info">
                        <div class="pic"><img src=""></div>
                        <div class="name">耶苏</div>
                        <div class="star">
                            <span></span><span></span><span></span><span></span>
                            <i></i>
                        </div>
                    </div>
                    <div class="evalTxt">
                        淘宝网是亚太地区较大的网络零售、商圈，由阿里巴巴集团在2003年5月创立。
                        淘宝网是中国深受欢迎的网购零售平台，拥有近5亿的注册用户数，
                        每天有超过6000万的固定访客，同时每天的在线商品数已经超过了8亿件，
                        平均每分钟售出4.8万件商品。
                    </div>
                    <div class="shareImg">
                        <div><img src=""></div>
                    </div>
                    <div class="dd">
                        <div class="color">米白色</div>
                        <div class="size">M码</div>
                        <div class="time">2017/01/02:00</div>
                    </div>
                </div>
                <div class="cha">查看全部评价</div>
                <div style="height:150px"></div>
            </div>             
        </scroll>
        <scroll  ref="details" class="recommend-content" v-if="currentIndex===1">
            <div>111</div>
            <div>111</div>
            <div>111</div>
            <div>111</div>
        </scroll>
        <scroll  ref="evaluate" class="recommend-content" v-if="currentIndex===2">
            <div>2222</div>
            <div>2222</div>
            <div>2222</div>
        </scroll>
        <baycar ref="baycar" @baycar="baycar"></baycar> 
        <div class="footer">
            <div class="dialogue"><span><i class="icon-font icon-message">&#xe63e;</i></span></div>
            <div class="collect"><span><i class="icon-font icon-star">&#xe605;</i></span></div>
            <div class="cart"><span><i class="icon-font icon-cart">&#xe647;</i></span></div>
            <div class="btnAdd" @click="showBaycar">加入购物车</div>
            <div class="btnBuy" @click="showBaycar">立即购买</div>
        </div> 
                     
        <popup text="领券"  ref="popupA"  v-show="showFlagA" @confirm="hideConfirmA">
                <div class="oneT">
                    <i></i>
                    <span>江浙沪包邮</span>
                    <b>领取</b>
                </div>
                <div class="oneT">
                    <i></i>
                    <span>偏远地区不负责派送</span>
                    <b class="yi">已领取</b>
                </div>
                
        </popup>   
        <popup text="服务"  ref="popupB"  v-show="showFlagB" @confirm="hideConfirmB">
            <div class="ses">
                <i></i>
                <span>24小时发货</span>
            </div>
            <div class="ses">
                <i></i>
                <span>8天无理由退货</span>
            </div>
            <div class="ses">
                <i></i>
                <span>江浙沪包邮</span>
            </div>
            <div class="ses">
                <i></i>
                <span>偏远地区不负责派送</span>
            </div>
                
        </popup>
              
    </div> 

  </transition>
</template>
<script>
  import Slider from 'base/slider/slider'
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading'
  import Switches from 'base/switches/switches'
  import Popup from 'base/popup/popup'
  import Baycar from 'components/baycar/baycar'
  import {getDetails} from 'api/recommend'
  import {ERR_OK} from 'api/config'
  import {mapGetters} from 'vuex'
	export default{
    data() {
      return {
        title:'',
        smalltitle:'',
        price:'',
        number:'',
        picList: [],
        comment:[],
        currentIndex:0,
        showFlagA:false,
        showFlagB:false,
        switches:[
          {
            name: '商品'
          },
          {
            name: '详情'
          },
          {
            name: '评价'
          }
        ]
      }
    },    
    computed:{
      ...mapGetters([
          'detail'

        ])
    },
    created(){
      console.log(this.detail)
      this._getDetail()
    },
    methods:{
      back() {
        this.$router.back()
      },
      showBaycar() {
        this.$refs.baycar.show()
      },
      baycar() {
        this.$router.push({
          path: `/settle/`
        })          
      },     
      showConfirmA() {
        this.showFlagA = true
      }, 
      showConfirmB() {
        this.showFlagB = true
      },       
      hideConfirmA() {
        this.showFlagA = false
      }, 
      hideConfirmB() {
        this.showFlagB = false
      },                      
      switchItem(index) {
        this.currentIndex = index
      },    
      loadImage() {
        if (!this.checkloaded) {
          this.checkloaded = true
          this.$refs.goods.refresh()
        }
      },      
      _getDetail(){
        if(!this.detail.id){
          this.$router.push('/index')
        }
        getDetails(this.detail.id).then((res)=>{
          if(res.code===ERR_OK){
            this.picList=res.data.imgUrl
            this.comment=res.data.comment
            this.title=res.data.title
            this.smalltitle=res.data.smalltitle
            this.price=res.data.price
            this.number=res.data.number
          }
        })
      }
    },
    components: {
      Slider,
      Scroll,
      Loading,
      Switches,
      Popup,
      Baycar
    }
  }
</script>
<style scoped lang='scss' type="text/css">
  @import "~common/scss/variable.scss";
  @import "~common/scss/mixin.scss";
  .details{
  	position: fixed;
  	z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  	background: $color-highlight-background;
  }
  .slide-enter-active{
    transition:all 0.3s;
  }
  .slide-enter{
    transform:translate3d(100%,0,0);
  } 
.heade{
     height:45px;
     line-height: 45px;
    text-align:center;
    font-size:$font-size-medium-x;
    .icon-all{
        position:absolute;
        top:12px;
        right:52px;
        font-size:$font-size-large-a;
         @include extend-click;
    } 
    .icon-evaluate{
        position:absolute;
        top:12px;
        right:15px;
        font-size:$font-size-large-a;
         @include extend-click;
    }
    .icon-back{
          font-weight: bold;
          position: absolute;
          top: 12px;
          left: 15px;
          font-size:$font-size-large-a;
           @include extend-click;
      }        
    .t3{
        display:flex;
        display:-webkit-flex;
        width:60%;
        margin:0 auto;
        justify-content:center;
        align-items:center;
    }
    .three{
        flex:1;
    }
}


    .recommend-content{
      height: 100%;
      overflow: hidden;     
      .slider-wrapper{
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 425px;
        overflow: hidden;
        .slider-content{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;         
        }
      }
      .recommend-list{
        .list-title{
          height: 48px;
          line-height: 48px;
          text-align: center;
          font-size: $font-size-medium-x;
          color: $color-text-d;         
        }
      }      
        
    }
.txt{
    width:92%;
    margin:10px auto 0;
}
.title{
    font-size:$font-size-medium-x;
    color:$color-text-d;
}
.description{
    position:relative;
    margin:5px 0;
}
.words{
    font-size:$font-size-small;
    color:$color-text-ll;
    line-height:20px;
}
.price{
    position:absolute;
    right:0;
    bottom:0;
    color:$color-sub-theme;
}
.price>i{
    font-style:normal;
    font-size:$font-size-medium-x;
}
.price>span{
    font-size:$font-size-large-b;
}
.favour,.evaluate{
    height:45px;
    line-height:45px;
    position:relative;
    margin-left:15px;
    border-bottom:1px solid $color-background;
}
.ser{
    border-bottom:none;
}
.favour>span{
    font-size:$font-size-medium;
    color:$color-text-d;
}
.favour>i,.evaluate i{
    position:absolute;
    top:15px;
    right:15px;
    font-size: 22px;
}
/*评价*/
.evaluate{
    font-size:$font-size-medium;
    color:$color-text-d;
}
.checkAll{
    position:absolute;
    right:15px;
    top:0;
    height:45px;
    line-height:45px;
    font-size:$font-size-small;
    color:$color-text-l;
}
.checkAll>span{
    margin-right:20px;
}
.checkAll>i{
    right:0;
}
.buyers{
    margin-left:15px;
    padding-right:15px;
    border-bottom:1px solid $color-background;
}
.info{
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    align-items:center;
    margin:10px 0;
}
.pic{
    flex:1;
}
.name{
    flex:3;
    font-size:$color-background;
    color:$color-text-d;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}
.star{
    flex:2;
    display:flex;
    display:-webkit-flex;
    justify-content:center;
}
.pic>img{
    display:block;
    width:45px;
    height:45px;
    border-radius:50%;
}
.star>span,.star>i{
    display:inline-block;
    flex:1;
    width:17px;
    height:17px;
}
.evalTxt{
    margin-bottom:10px;
    line-height:20px;
    font-size: $font-size-medium;
}
.shareImg{
    overflow:hidden;
}
.shareImg>div{
    width:25%;
    float:left;
}
.shareImg>div:nth-child(4n+2),.shareImg>div:nth-child(4n+3){
    text-align:center;
}
.shareImg>div:nth-child(4n){
    text-align:right;
}
.shareImg>div>img{
    display:inline-block;
    width:90%;
    height:85px;
    border-radius:5px;
}
.dd{
    height:30px;
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    align-items:center;
    color:$color-text-ll;
    font-size:$font-size-small;
    .color{
        flex:1;
    }
    .size{
        flex:1;
    }
    .time{
        flex:3;
        text-align:right;
    }    
}

.cha{
    width:92%;
    margin:10px auto;
    font-size:$font-size-medium;
    color:$color-text-d;
    height:30px;
    line-height:30px;
    border:1px solid $color-text-ll ;
    border-radius:5px;
    text-align:center;
}
.division {
    height: 10px;
    background-color:$color-background;
}
/*.footer*/
.footer{
    height:50px;
    display:flex;
    display:-webkit-flex;
    position:fixed;
    width:100%;
    bottom:0;
    background-color:#f1f2f4;
} 
.footer>div{
    text-align:center;
    height:50px;
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    align-items:center;
    border-top:1px solid #e7e7e7;
}
.footer>div.btnBuy{
    border-top:1px solid #dc3a2d;
}
.dialogue,.collect,.cart{
    flex:1;
    border-right:1px solid #e7e7e7;
}
.dialogue>span,.collect>span,.cart>span{
    display:inline-block;
    width:22px;
    height:22px;
}
.dialogue>span{
  font-size: $font-size-large-a;
}
.collect>span{
  font-size: $font-size-large-a;
}
.collect>span.like{
  font-size: $font-size-large-a;
   color:$color-text-d;
}
.cart>span{
  font-size: $font-size-large-a;
}
.btnAdd,.btnBuy{
    flex:2;
    font-size:15px;
}
.btnAdd{
    color:$color-text-d;
}
.btnBuy{
    background-color:#dc3a2d;
    color:$color-text;
}
.oneT {
    margin-left: 15px;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #f1f2f4;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    position: relative;
}
.oneT > i,.ses>i {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #dc3a2d;
}
.oneT > span {
    position: absolute;
    left: 15px;
    font-size: 14px;
}
.oneT > b {
    font-weight: normal;
    position: absolute;
    width: 60px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    right: 15px;
    font-size: 13px;
    color: #dc3a2d;
    border: 1px solid #dc3a2d;
    border-radius: 3px;
}
.ses {
    margin-left: 25PX;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    height: 40PX;
}
.ses > span {
    padding-left:13px;
}
</style>